<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在局部组件中使用props接收静态数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
props 用来给组件传递相应静态数据或者是动态数据

总结：
1.使用组件时可以在组件上定义多个属性和对应的数据
2.在组件内部可以使用props数组声明多个定义在组件上的属性名，
  之后可以在组件中通过{{属性名}}获取属性值
<div id="app">
    <!--使用组件, 通过组件进行静态数据传递-->
    <login username="AnonyEast" date="7月22日"></login>
</div>

<script>
    //定义局部组件方式一
    var loginComponent = {
        template: '<div><h2>{{username}},欢迎您,您在{{date}}访问本站</h2></div>',
        props:['username','date'] //// props: 用来接收使用组件时通过组件标签传递的数据
    }

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components:{//用来注册局部组件，组件名和变量名一致时可以省略冒号
            login:loginComponent
        }
    });
</script>
</body>
</html>